<%--
  Created by IntelliJ IDEA.
  User: maicss
  Date: 2022/4/30
  Time: 下午12:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <link href="style/loginpage.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="page" id="page_login">
        <h1>登录</h1>
        <form action="../loginServlet?type=login" method="post" onsubmit="return checkLoginForm()" >
            <input id="login_name" type="text" name="user_name" placeholder="用户名">
            <input id="login_pwd" type="password" name="user_pwd" placeholder="密码">
            <p class="message"></p>
            <span class="tip">还没有账号？请先<a onclick="switchPage(1)">注册</a></span>
            <input type="submit" value="登录">
        </form>
    </div>
    <div class="page" id="page_register">
        <h1>注册</h1>
        <form action="../loginServlet?type=register" method="post" onsubmit="return checkRegisterForm()">
            <input id="register_name" type="text" name="user_name" placeholder="用户名">
            <input id="register_pwd" type="password" name="user_pwd" placeholder="密码">
            <input id="invitation_code" type="text" name="user_invitation_code" placeholder="邀请码">
            <p class="message"></p>
            <span class="tip">已经有账号？可以<a onclick="switchPage(0)">登录</a></span>
            <input type="submit" value="注册">
        </form>
    </div>
<script>
    let login_name = document.getElementById("login_name")
    let login_pwd = document.getElementById("login_pwd")
    let register_name = document.getElementById("register_name")
    let register_pwd = document.getElementById("register_pwd")
    let invitation_code = document.getElementById("invitation_code")
    let messages = document.getElementsByClassName("message")
    function checkLoginForm(){
        if (login_name.value === ""){
            messages[0].innerHTML = "用户名不能为空"
            return false
        } else if (login_pwd.value === ""){
            messages[0].innerHTML = "密码不能为空"
            return false
        }
        return true
    }
    function checkRegisterForm(){
        if (register_name.value === ""){
            messages[1].innerHTML = "用户名不能为空"
            return false
        } else if (register_pwd.value === ""){
            messages[1].innerHTML = "密码不能为空"
            return false
        } else if (invitation_code.value === ""){
            messages[1].innerHTML = "您必须提供一个邀请码"
            return false
        }
        return true
    }

    function switchPage(index) {
        let pages = document.getElementsByClassName("page")
        for (let page of pages){
            page.style.left = "-300px";
            page.style.opacity = "0";
        }
        pages[index].style.left = "78px";
        pages[index].style.opacity = "1";
    }
    let page = window.location.hash
    if (page != null){
        if (page==="#register"){
            switchPage(1)
        }else {
            switchPage(0)
        }
    }
</script>
</body>
</html>
